<template>
  <div class="selectMonth">
    <el-date-picker
      :editable="false"
      :clearable="false"
      v-model="month"
      type="month"
      placeholder="选择月"
      format="M月"
    ></el-date-picker>
  </div>
</template>

<script>
$(function() {
  $(".el-date-picker__header > button").removeClass(".el-icon-caret-left");
});

export default {
  data() {
    return {
      month: new Date()
    };
  }
};
</script>

<style lang="scss">
@import "../../styles/bossVersion/_basics";

.selectMonth {
  .el-date-editor.el-input {
    @include flexYcen;
    width: 166px;
    height: 64px;
    padding: 12px;
    padding-right: 0;
    background-color: $color0;
    border-radius: 0;
  }
  .el-input__inner {
    width: 92px;
    height: initial;
    padding: 0;
    color: $color1;
    font-size: 36px;
    text-align: center;
    line-height: 1;
    border: 1px solid transparent;
    background-color: transparent;
    &::-webkit-input-placeholder {
      height: 20px;
      color: $color1;
      font-size: 26px;
      text-align: center;
    }
  }
  //   图标
  .el-input__prefix {
    @include flexXYcen;
    position: relative;
    top: initial;
    width: 58px;
    height: inherit;
    color: inherit;

    & > .el-icon-date:before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-top: 23px;
      background: url("../../../static/img/bossVersion/date.png") left top
        no-repeat / 100% 100%;
    }
    &::after {
      content: "";
      height: 40px;
      width: 1px;
      background: $color9;
      position: absolute;
      left: 0px;
    }
    .el-input__icon {
      @include absoluteAllSides(0, 0, 0, 0, 1);
      width: initial;
      height: initial;
    }
  }
}
//   日期选择器
.el-picker-panel {
  top: 8.72% !important;
  left: 16% !important;
  width: 224px;
  //   height: 320px;
  margin: 0 !important;
  background-color: $color0;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.el-date-picker .el-picker-panel__content {
  width: 214px !important;
  margin: 0 !important;
}
.el-date-picker__header--bordered {
  border-bottom: transparent;
}
.el-month-table td,
.el-year-table td {
  padding: 0 10px 10px;
}
.el-month-table td .cell,
.el-year-table td .cell {
  height: 58px;
  line-height: 58px;
  background-color: $dataBack;
  border: 1px solid $dataBack;
}
.el-month-table td .cell:hover,
.el-year-table td .cell:hover {
  color: $color1;
  background-color: $dataBack;
  border: 1px solid $color1;
}
.el-month-table td.current:not(.disabled) .cell,
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
  color: $color1;
  font-weight: bold;
  background-color: $dataBack;
  border: 1px solid $color1;
}
.el-date-picker__header-label,
.el-date-picker__header-label:hover { color: $color1; }
</style>

